<template>
   <div >
        <div style="color:white">界面设置</div>
        <div class="rightFun">
            <font-awesome-icon icon="down-left-and-up-right-to-center" class="icon1 Window"
                              v-if="SettingBoxSize==1"  @click="SETSETTINGBOXSIZE(0)"/> 
             <font-awesome-icon icon="up-right-and-down-left-from-center" class="icon1 Window" @click="SETSETTINGBOXSIZE(1)" v-else/> 
             <font-awesome-icon icon="xmark" class="icon" @click="SETTINGDOWN()"/> 
        </div>
   </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
  export default 
  {
     name :'', 
       methods:{
        ...mapMutations('Setting',['SETTINGDOWN','SETSETTINGBOXSIZE']),
     },
     computed:{
        ...mapState('Setting',['SettingBoxSize']),
     }
  }
</script>
<style scoped>

.rightFun{
    position: absolute;
    right: 0;
    width: 150px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.icon{
    width: 25px;height: 25px;
    color: white;
    padding: 5px;
}
.icon1{
    width: 20px;height: 20px;
    color: white;
     padding: 10px;
}
.icon:hover,.icon1:hover{
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}
</style>